<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    ref="chart"
    v-ui-ref="vSetRef"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import { lineOption } from './chartOptionJson.js'
  import cloneDeep from 'lodash/cloneDeep'
  import { lineResponse } from './chartResponseJson.js'
  import * as echarts from 'echarts'
  import findIndex from 'lodash/findIndex'
  export default defineComponent({
    name: 'UiLineChart',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponentLine: {},
      }
    },
    watch: {
      'info.extension': {
        handler() {
          this.$nextTick(() => {
            this.infoComponentLine = cloneDeep(this.info)
            console.log(cloneDeep(this.infoComponentLine), '-----------------3')
            // this.infoComponentLine.extension.requestSet.value.resList = []
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
          })
        },
        deep: true,
      },
      getSelectModule: {
        handler(val, oldVal) {
          if (!oldVal.extension) {
            if (lineOption[val.chartTypeValue]) {
              this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = false)
            } else {
              this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = true)
            }
          }
          if (
            val.extension &&
            oldVal.extension &&
            val._id != oldVal._id &&
            this.getSelectModule.extension &&
            this.getSelectModule.extension.requestSet
          ) {
            this.getSelectModule.extension.requestSet.value.isJson = false
          }
          console.log(lineResponse[val.chartTypeValue], '11111111111111')
          if (
            lineOption[val.chartTypeValue] &&
            this.getSelectModule.extension &&
            this.getSelectModule.extension.requestSet &&
            !this.getSelectModule.extension.requestSet.value.isJson &&
            this.getSelectModule.extension.requestSet.value.resList.length == 0
          ) {
            this.getSelectModule.extension.requestSet.value.isJson = true
            this.getSelectModule.extension.requestSet.value.resList = lineResponse[val.chartTypeValue]
          }
        },
        deep: true,
      },
    },
    created() {
      this.infoComponentLine = cloneDeep(this.info)
    },
    mounted() {
      if (this.info.extension.firstGetData?.value === false) {
        return
      }
      this.$nextTick(() => {
        console.log(this.infoComponentLine.extension?.requestSet?.value?.resList.value, '-----------------1')
        console.log(this.infoComponentLine.extension?.requestSet?.value?.resList.value, '-----------------2')
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      console.warn('退出----------------------')
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        if (lineOption[this.info.chartTypeValue] && this.infoComponentLine.extension.requestSet.value.resList.length == 0) {
          this.infoComponentLine.extension.requestSet.value.isJson = true
          this.infoComponentLine.extension.requestSet.value.resList = lineResponse[this.info.chartTypeValue]
        } else if (!lineOption[this.info.chartTypeValue] && this.infoComponentLine.extension.requestSet.value.resList.length == 0) {
          this.infoComponentLine.extension.requestSet.value.resList.push({
            name: 'EDITWHO',
            id: this.infoComponentLine.extension.series.value[0].name,
            value: 'QTY',
          })
          this.getSelectModule.extension &&
            this.getSelectModule.extension.requestSet.value.resList.push({
              name: 'EDITWHO',
              id: this.infoComponentLine.extension.series.value[0].name,
              value: 'QTY',
            })
        }
        let obj = {}
        console.log(this.infoComponentLine.extension?.requestSet?.value?.resList, '-----------------')
        // this.infoComponentLine.extension.requestSet.value.resList = []
        if (!lineOption[this.info.chartTypeValue] && this.infoComponentLine.extension.requestSet.value.resList.length == 0) {
          this.infoComponentLine.extension.requestSet.value.resList.push({
            name: 'EDITWHO',
            id: this.infoComponentLine.extension.series.value[0].name,
            value: 'QTY',
          })

          this.getSelectModule.extension.requestSet.value.resList.push({
            name: 'EDITWHO',
            id: this.infoComponentLine.extension.series.value[0].name,
            value: 'QTY',
          })
        }
        // console.log((this.infoComponentLine.extension.requestSet.value)
        this.$request(this.infoComponentLine.extension.requestSet.value, (res) => {
          if (this.info.chartTypeValue == 'dynamicLine') {
            obj['dynamicLine'] = res
            this.initChart(obj)
            return
          }
          this.infoComponentLine.extension.requestSet.value['resList'].map((item) => {
            obj[item.id] = this.$getResponseData(res, item)
          })
          console.log(obj)
          this.initChart(obj)
        })
      },
      initChart(obj) {
        let dataObj = cloneDeep(obj)
        let chartDom = this.$refs.chart
        let myChart = echarts.init(chartDom)
        let lineOptions = cloneDeep(lineOption)
        let series = lineOptions[this.info.chartTypeValue]
        let data = cloneDeep(this.info.extension)
        let option = this.formatterOption(data)
        if (series) {
          if (this.info.chartTypeValue == 'timeMarkLine') {
            // 与后台数据对比,没有则填充
            let newDatas = { timeMarkLine: [] }
            for (let i = 0; i < 24; i++) {
              let doubleNum = i < 10 ? '0' + i : i
              let index = findIndex(dataObj['timeMarkLine'], ['name', doubleNum + ':00'])
              if (index == -1) {
                newDatas.timeMarkLine.push({ name: doubleNum + ':00', value: 0 })
              } else {
                newDatas.timeMarkLine.push(dataObj['timeMarkLine'][index])
              }
            }
            dataObj = cloneDeep(newDatas)
            option = Object.assign(option, series(dataObj))
            option.series.forEach((item) => {
              item.markArea.itemStyle.color = option.markAreaColor
            })
            if (option.visualMap && option.visualMap.pieces) {
              option.visualMap.pieces.forEach((item) => {
                if (item.color == 'red') {
                  item.color = option.markLineColor
                } else {
                  item.color = option.color[0].v
                }
              })
            }
            option.grid = data.xAxis ? data.xAxis.value.map((item) => item.grid) : ''
          } else {
            option = Object.assign(option, series(dataObj[this.info.chartTypeValue]))
          }
        } else {
          option.grid = option.yAxis ? option.yAxis.map((item) => item.grid) : ''
          option.xAxis.map((item) => {
            console.log(dataObj, option.series, item)
            item.data = dataObj[option.series.find((cu) => cu.axisIndex == item.gridIndex).name].map((item) => item.name)
            return item
          })
        }
        option.color = option.color.map((item) => item.v)
        option.grid = option.grid
          ? option.grid
          : {
              show: false,
              left: '20%',
              top: '20%',
              right: '20%',
              bottom: '20%',
              backgroundColor: 'transparent',
            }
        option.legend.itemWidth = Number(option.legend.itemWidth)
        option?.series?.map((item) => {
          if (!['dynamicLine'].includes(this.info.chartTypeValue)) {
            item.data = dataObj[item.typeName || item.name]
          }
          return item
        })
        option.legend.textStyle.fontSize = this.infoComponentLine.extension.legend_textStyle_fontSize.value
        // console.warn('%c option', 'color: red;', option)
        option && myChart.setOption(cloneDeep(option), true)
        let resizeObserver = new ResizeObserver(() => {
          myChart.resize()
        })
        resizeObserver.observe(this.$refs.chart)
      },
    },
  })
</script>
<style lang="scss">
  .uiLineChart {
    height: 100%;
  }
</style>
